import { createNamespacedHelpers } from 'vuex';
// import Icon from 'vue-svg-icon/Icon.vue'
const { mapState } = createNamespacedHelpers('permission');

export default {
  name: 'navMenu',
  data() {
    return {
      selectedKeys: [], // 默认选中的菜单
      openKeys: [], // 默认打开的菜单
    };
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    // Icon
  },
  computed: {
    ...mapState(['addRouters']),
  },
  watch: {
    $route: {
      handler(value) {
        this.openKeys = value.matched.slice(0, -1).map((v) => v.path);
        this.selectedKeys = [value.path];
      },
      immediate: true,
    },
  },
  methods: {
    jumpRoute(path) {
      if (this.$route.path === path) return;
      this.$router.push({ path });
    },
    selectItem(val) {
      this.$children[0].sOpenKeys = val.keyPath.reverse().slice(0, 1);
    },
  },
  mounted() {
  },
  render() {
    const childCompomentsIsHiddle = (child) => !(child.children || []).every((c) => c.meta && c.meta.hidden);
    const renderChildren = (list) => // 渲染子菜单
      list.map((child) => (child.children && child.children.length
        ? ((child.meta && !child.meta.hidden && childCompomentsIsHiddle(child))
          ? <a-sub-menu key={child.path}>
            <span slot="title" >
              {child.meta.icon
                && (typeof child.meta.icon === 'string' ? <a-icon type={child.meta.icon} /> : <a-icon component={child.meta.icon} />)}
              <span>{child.meta.title}</span>
            </span>
            {renderChildren(child.children)}
          </a-sub-menu>
          : <a-menu-item key={child.path} onClick={() => { this.jumpRoute(child.path); }}>
            <span >
              {child.meta.icon
                && (typeof child.meta.icon === 'string' ? <a-icon type={child.meta.icon} /> : <a-icon component={child.meta.icon} />)
              }
              <span >{child.meta.title}</span>
            </span>
          </a-menu-item>
        )

      // 是否隐藏当前菜单
        : (child.meta && !child.meta.hidden)
          && <a-menu-item key={child.path} onClick={() => { this.jumpRoute(child.path); }}>
            <span >
              {child.meta.icon
                && (typeof child.meta.icon === 'string' ? <a-icon type={child.meta.icon} /> : <a-icon component={child.meta.icon} />)
              }
              <span >{child.meta.title}</span>
            </span>
          </a-menu-item>));

    return <a-menu
      default-selected-keys={this.selectedKeys}
      selectedKeys={this.selectedKeys}
      default-open-keys={this.openKeys}
      mode="inline"
      theme="light"
      inline-collapsed={true}
      onClick={(val) => { this.selectItem(val); }}
    >
      {renderChildren(this.addRouters[0].children)}
    </a-menu>;
  },
};
